<template>
  <div>
    <div class="search">
      <a-form :model="searchParam" layout="inline">
        <a-form-item label="用户名" name="username">
          <a-input v-model:value="searchParam.username" />
        </a-form-item>
      </a-form>
    </div>

    <a-table :dataSource="dataSource" :columns="columns" bordered>
      <template #bodyCell="{ column, text, record }">
        <template v-if="column.dataIndex === 'operation'">
          <span>
            <a>修改</a>
            <a-divider type="vertical" />
            <a>删除</a>
          </span>
        </template>
      </template>
    </a-table>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, type Ref, onMounted } from 'vue'
import { getUserList } from '@/api/user'

interface DataItem {
  key: string
  name: string
  age: number
  address: string
}
const searchParam = reactive({
  username: '',
})
const dataSource: Ref<DataItem[]> = ref([
  {
    key: '1',
    name: '胡彦斌',
    age: 32,
    address: '西湖区湖底公园1号',
  },
  {
    key: '2',
    name: '胡彦祖',
    age: 42,
    address: '西湖区湖底公园1号',
  },
  {
    key: '1',
    name: '胡彦斌',
    age: 32,
    address: '西湖区湖底公园1号',
  },
  {
    key: '2',
    name: '胡彦祖',
    age: 42,
    address: '西湖区湖底公园1号',
  },
  {
    key: '1',
    name: '胡彦斌',
    age: 32,
    address: '西湖区湖底公园1号',
  },
  {
    key: '2',
    name: '胡彦祖',
    age: 42,
    address: '西湖区湖底公园1号',
  },
  {
    key: '1',
    name: '胡彦斌',
    age: 32,
    address: '西湖区湖底公园1号',
  },
  {
    key: '2',
    name: '胡彦祖',
    age: 42,
    address: '西湖区湖底公园1号',
  },
  {
    key: '1',
    name: '胡彦斌',
    age: 32,
    address: '西湖区湖底公园1号',
  },
  {
    key: '2',
    name: '胡彦祖',
    age: 42,
    address: '西湖区湖底公园1号',
  },
  {
    key: '1',
    name: '胡彦斌',
    age: 32,
    address: '西湖区湖底公园1号',
  },
  {
    key: '2',
    name: '胡彦祖',
    age: 42,
    address: '西湖区湖底公园1号',
  },
  {
    key: '1',
    name: '胡彦斌',
    age: 32,
    address: '西湖区湖底公园1号',
  },
  {
    key: '2',
    name: '胡彦祖',
    age: 42,
    address: '西湖区湖底公园1号',
  },
])
const columns = ref([
  {
    title: '用户名',
    dataIndex: 'username',
    key: 'username',
  },
  {
    title: '性别',
    dataIndex: 'gender',
    key: 'gender',
  },
  {
    title: '状态',
    dataIndex: 'isDelete',
    key: 'isDelete',
  },
  {
    title: '操作',
    dataIndex: 'operation',
    key: 'operation',
  },
])


onMounted(() => {
  getUserList(searchParam.username).then((res: any) => {
    dataSource.value = res.data;
  });
})
</script>

<style scope>
.search {
  margin: 0 0 10px;
}
</style>
